<script language='JavaScript'>
	function show(name) {
		var elem1 = document.getElementById(name);
		if (elem1.style.display == "none") {
			elem1.style.display = "block";
		} else {
			elem1.style.display = "none";
		}
	}
	
	function tdShow(name, hide)
	{
		var elem1 = document.getElementById(name);
		if(elem1.checked)
			elem1.checked = false;
		else
		 	elem1.checked = true;
		
		show(hide);
	}
	
	function check(name)
	{
		var elem1 = document.getElementById(name);
		if(elem1.checked)
			elem1.checked = false;
		else
		 	elem1.checked = true;
	}
</script>
<script>

function roleFct(select)
{
	var courseDiv = document.getElementById("coursesDiv");
	if (select.value == "student") {
		courseDiv.style.display = "block";
	} else {
		courseDiv.style.display = "none";
	}
}
function checkName(username, img)
{
 var z = true;
 re = /^\w+$/;
  if(!re.test(username.value)|| username.value.length<5)
  {
    document.forms["myForm"][img].title="Username can contain only letters, numbers and underscores!" + "\n" + "Minimal length is 5 chars";
    z = false;
  }
 changeImage(z, img);
}

function checkNumber(number)
{
 var z = true;
 re = /^\w+$/;
 var numbers = number.value.replace(/[A-Za-z$-]/g, "");
  if(!re.test(number.value)|| number.value.length != 8 || number.value.charAt(0) != "r" && number.value.charAt(0) != "u" || numbers.length != 7)
  {
    document.forms["myForm"]["imgNumber"].title="Username can contain only letters, numbers and underscores!" + "\n" + "Minimal length is 5 chars" + "\n" + "Must start with r or u";
    z = false;
  }
 changeImage(z, "imgNumber");
}
function validate(evt) {
	  if(evt.keyCode != 46 && evt.keyCode != 8 && evt.keyCode != 9 && evt.keyCode != 27 && evt.keyCode != 13 )
		  {
			  var theEvent = evt || window.event;
			  var key = theEvent.keyCode || theEvent.which;
			  key = String.fromCharCode( key );
			  var regex = /[0-9]|\./;
			  if( !regex.test(key) ) {
			    theEvent.returnValue = false;
			    if(theEvent.preventDefault) theEvent.preventDefault();
			  }
		  }
	}
function changeImage(Bool, img)
{
	elem = document.getElementById(img);
	elem.style.display = "";
if(Bool==true)
   elem.src="img/share-check.png";
else
   elem.src="img/cross.png";
}
function checkEmail()
{
var z=true;
var x=document.forms["myForm"]["email"].value;
var atpos=x.indexOf("@");
var dotpos=x.lastIndexOf(".");
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length)
  {
  document.forms["myForm"]["imgEmail"].title="Not a valid e-mail";
  z=false;
  }
changeImage(z, "imgEmail");
}
function checkPassword(password)
{
 var z = true;
 re = /^\w+$/;
 
 elem = document.getElementById("cpassword");
 
  if(!re.test(password.value)|| password.value.length<5)
  {
    document.forms["myForm"]["imgPassword"].title="Password must contain only letter, numbers and underscores"+ "\n" + "Minimal length is 6 chars";
    z = false;
  }
  checkCpassword(elem.value);
  changeImage(z, "imgPassword");
 
}
function checkCpassword(cpassword)
{
 var z = true;
 re = /^\w+$/;
  if(cpassword.value!= document.forms["myForm"]["password"].value)
  {
    document.forms["myForm"]["imgCpassword"].title="Passwords don't match" ;
    z = false;
  }
 changeImage(z, "imgCpassword");
}
function showPass()
{
	show("passwordDiv");
	show("passwordButton");
}
</script>
<body>
	<div id="main">
		<%@include file="header.jsp"%>
		<%
			List<Course> courses = CourseRegistry.getInstance().getCourses();
			User csUser = (User) session.getAttribute("csUser");
			if(csUser == null)
				csUser = currentUser;
		%>
		<div id="error">
			<p class="warning" <%if (session.getAttribute("errors") == null) {%>
				style="display: none;" <%}%>>
				<%
					if (session.getAttribute("errors") != null) {
								for (String s : (List<String>) session.getAttribute("errors")) {
								s = "- " + s;
				%>
				<%=s%>
				</br>
				<%
					}
				%>

				<script>
				
				</script>
				<%
					}
							session.setAttribute("errors", null);
				%>
			</p>
		</div>
		<fieldset>
			<legend>Change Settings</legend>
			<form name="myForm" id='editForm' action="ChangeSettings"
				method="post" style="font-size: 25px;">
				<br /> <br /> First Name: <br /> <input
					style='width: 95%; height: 35px; font-size: 25px;' type="text"
					id="firstname" name="firstname"
					value='<%=csUser.getFirstName()%>' /> <img
					name="imgFirstname" style="display: none; padding-left: 5px;"
					id="imgFirstname" alt="" src="" width="20" height="20"> <br />
				Name: <br /> <input
					style='width: 95%; height: 35px; font-size: 25px;' type="text"
					id="name" name="name" value='<%=csUser.getName()%>' /> <img
					name="imgName" style="display: none; padding-left: 5px;"
					id="imgName" alt="" src="" width="20" height="20"> <br />
				Student/tutor number: <br /> <input
					style='width: 95%; height: 35px; font-size: 25px;'
					onchange="checkNumber(this)" type="text" id="number" name="number"
					value='<%=csUser.getNumber()%>' /> <img name="imgNumber"
					style="display: none; padding-left: 5px;" id="imgNumber" alt=""
					src="" width="20" height="20"> <br /> 
				E-mail: <br /> <input
					style='width: 95%; height: 35px; font-size: 25px;'
					onchange="checkEmail()" type="text" id="email" name="email"
					value='<%=csUser.getEmail()%>' /> <br> <br> 
				Notification Threshold: <font size=2 color="grey"><i>(If you're under this percentage of users for a course you receive a notification.)</i></font><input
					style='width: 95%; height: 35px; font-size: 25px;'
					onchange="checkEmail()" type="text" id="treshold" name="treshold"
					value='<%=csUser.getTreshold()%>' onkeypress='validate(event)'/>%
				<div id="passwordDiv" style="display: none;">
				Password: <br /> <input
					style='width: 95%; height: 35px; font-size: 25px;'
					onchange="checkPassword(this)" type="password" id="password"
					name="password" value='<%=csUser.getPassword()%>' /> <img name="imgPassword"
					id="imgPassword" style="display: none;" alt="" src="" width="20"
					height="20"> <br /> Confirm Password: <br /> <input
					style='width: 95%; height: 35px; font-size: 25px;'
					onchange="checkCpassword(this)" type="password" id="cpassword"
					name="cpassword" value='<%=csUser.getPassword()%>' /> <img name="imgCpassword"
					id="imgCpassword" style="display: none;" alt="" src="" width="20"
					height="20"> <br /> <br />
				</div>
				<br>
				<select
				
					name="role" id="role" onchange="roleFct(this);"
					style="display: none; width: 100%; height: 33px; font-size: 25px; text-align: center;">
					<option value="student">student</option>
					<option value="tutor">tutor</option>
				</select>
				<br> <br>
				<div id="coursesDiv">
					<table class='tablesorter' id='LinkTable' width='97%'>
						<tbody>
							<tr>
								<td class='tb3' onclick="tdShow('1', 'fases');"><input
									type="checkbox" id="1" name="ingenieurswetenschappen"
									onclick="show('fases');"> Ingenieurswetenschappen
								</td>
							</tr>
						</tbody>
					</table>
					<div id="fases" style="padding-left: 20px; display: none;">
						<table class='tablesorter' id='LinkTable' width='97%'>
							<tbody>
								<tr>
									<td class='tb3' onclick="tdShow('2', 'fase1');"
										style="background-image: url(img/SpryMenuBarRight.gif); background-repeat: no-repeat; background-position: center right;"><input
										id="2" type="checkbox" name="fase1"
										onclick="show('fase1');"> Fase 1<br /></td>
								</tr>
							</tbody>
						</table>


						<div id="fase1" style="padding-left: 20px; display: none;">


							<table class='tablesorter' id='LinkTable' width='97%'>
								<tbody>
									<tr>
										<td class='tb3' onclick="tdShow('3', 'semester1');"><input
											id="3" type="checkbox" name="semester 1"
											onclick="show('semester1');"> Semester 1<br /></td>
									</tr>
								</tbody>
							</table>


							<div id="semester1" style="padding-left: 20px; display: none;">
								<table class='tablesorter' id='LinkTable' width='97%'>
									<tbody>
										<%
											for (dashboard.Course course : courses) {
																				if (course.getFase() == 1 && course.getSemester() == 1) {
										%>

										<tr>
											<td class='tb3' onclick="check('<%=course.getId()%>');"><input
												type="checkbox" id=<%=course.getId()%> name="courses"
												value=<%=course.getId()%>> <%=course.getCourseName()%></td>
										</tr>
										<%
											}
																			}
										%>
									</tbody>
								</table>
							</div>


							<table class='tablesorter' id='LinkTable' width='97%'>
								<tbody>
									<tr>
										<td class='tb3' onclick="tdShow('4', 'semester2');"><input
											id="4" type="checkbox" name="semester2"
											onclick="show('semester2');"> Semester 2 <br /></td>
									</tr>
								</tbody>
							</table>


							<div id="semester2" style="padding-left: 20px; display: none;">
								<table class='tablesorter' id='LinkTable' width='97%'>
									<tbody>
										<%
											for (dashboard.Course course : courses) {
																				if (course.getFase() == 1 && course.getSemester() == 2) {
										%>

										<tr>
											<td class='tb3' onclick="check(<%=course.getId()%>);"><input
												id=<%=course.getId()%> type="checkbox" name="courses"
												value=<%=course.getId()%>> <%=course.getCourseName()%></td>
										</tr>
										<%
											}
																			}
										%>
									</tbody>
								</table>
							</div>


						</div>


						<table class='tablesorter' id='LinkTable' width='97%'>
							<tbody>
								<tr>
									<td class='tb3' onclick="tdShow('5', 'fase2');"><input
										id="5" type="checkbox" name="fase2"
										onclick="show('fase2');"> Fase 2 <br /></td>
								</tr>
							</tbody>
						</table>


						<div id="fase2" style="padding-left: 20px; display: none;">


							<table class='tablesorter' id='LinkTable' width='97%'>
								<tbody>
									<tr>
										<td class='tb3' onclick="tdShow('6', 'semester3');"><input
											id="6" type="checkbox" name="semester 1"
											onclick="show('semester3');"> Semester 1<br /></td>
									<tr>
								</tbody>
							</table>

							<div id="semester3" style="padding-left: 20px; display: none;">
								<table class='tablesorter' id='LinkTable' width='97%'>
									<tbody>
										<%
											for (dashboard.Course course : courses) {
																				if (course.getFase() == 2 && course.getSemester() == 1) {
										%>
										<tr>
											<td class='tb3' onclick="check(<%=course.getId()%>);"><input
												type="checkbox" id=<%=course.getId()%> name="courses"
												value=<%=course.getId()%>> <%=course.getCourseName()%></td>
										</tr>
										<%
											}
																			}
										%>
									</tbody>
								</table>
							</div>


						</div>

					</div>
				</div>
				<br /> <br />
				<div class="button">
					<input type="button" id="passwordButton" onclick="showPass();" value="Change Password" style="width: 100%;" />
					<input type="button"  style="width: 100%;" href="admin.jsp" value="Add New Course"><br /> <br />
					<input type="submit" value="Submit" style="width: 100%;" />
				</div>
			</form>
		</fieldset>
	</div>
</body>
<%
	if(csUser.getRole() == User.Role.TUTOR){
%>
<script> 
				var elem = document.getElementById("role");
				elem.selectedIndex = 1;
				roleFct("test");
				</script>
<%
	}
%>
<%
	if(csUser.getCourses() != null){
	for(Long lng: csUser.getCourses()){
%>
<script>
	check(<%=lng%>);
</script>
<%
	}}
%>
